<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lhy test</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div>
    <div id="app">
        {{message}}
    </div>
    <div id="app-2">
        <span v-bind:title="message">
            Hover your  mouse over me  for a seconds to see my bound title!
        </span>
    </div>
    <div id="app-3">
        <p v-if="seen"> Now you see me</p>
    </div>
    <div id="app-4">
            <ol v-for="todo in todos">
                <li>{{todo.text}}</li>
            </ol>
    </div>
    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMeaage">Reverse Message</button>
    </div>
    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <div id="app-7">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
    </div>
    <!--<div id="app">-->
        <!--<app-nav></app-nav>-->
        <!--<app-view></app-view>-->
        <!--<app-content></app-content>-->
    <!--</div>-->
    <div id="example">
        {{meaaage.split('').reverse().join('')}}
    </div>
    <div>
        <input type="radio" id="one" value="one" v-model="picked">
        <label for="one">one</label>
        <br>
        <input type="radio" id="two" value="two" v-model="picked">
        <label for="two">two</label>
        <br>
        <span>Picked:{{picked}}</span>
    </div>
</div>
</body>
<script src="./js/app.js"></script>
</html>